<!-- 弹框组件 -->
<template>
  <div class="page_modal">
    <el-dialog v-model="isShowDialog" :title="dialogTitle" width="30%" center :destroy-on-close="true">
      <base-form :form-config="modalFormConfig" v-model="formDateModel">
      </base-form>
      <slot></slot>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="isShowDialog = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang='ts' >
import { ref, watch } from 'vue'
import { useStore } from "@/store"
const store = useStore()
const props = defineProps({
  modalFormConfig: {
    type: Object,
    required: true
  },
  defaultInfo: {
    type: Object,
    required: true
  },
  otherInfo: {
    type: Object,
    default: () => { }
  },
  pageName: {
    type: String,
    required: true
  },

})
const isShowDialog = ref(false)
const dialogTitle = ref('添加用户信息')
const formDateModel = ref<any>({})

watch(() => props.defaultInfo, (newVal: any) => {

  for (const item of props.modalFormConfig.formItems) {
    // 如果存在关联数据 需要进行特殊映射关系绑定
    if (item['isAssociate']) {
      if (!newVal[`${item.associateName}`]) {
        // 初始化参数默认值
        formDateModel.value[`${item.field}`] = item['defaultValue']
      } else {
        formDateModel.value[`${item.field}`] = newVal[`${item.associateName}`].map((it: { [x: string]: any; }) => {
          return it[`${item.associateKey}`]
        })

      }
    } else {
      formDateModel.value[`${item.field}`] = newVal[`${item.field}`]
    }
  }

}, { immediate: true, deep: true })

// 弹出框确认事件
const handleConfirm = () => {
  isShowDialog.value = false
  // 编辑事件
  const id = props.defaultInfo.id

  store.dispatch(`${props.pageName}/${props.pageName}CreateOrEditAction`, { ...formDateModel.value, ...props.otherInfo, id })
}

defineExpose({
  isShowDialog,
  dialogTitle
})
</script>
<style lang='less' scoped>
</style>
